<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/common/global.jsp"%>
<title>${product.title} 商品信息</title>
<%@ include file="/common/meta.jsp"%>
<%@ include file="/common/include-base-styles.jsp"%>
<link type="text/css" rel="stylesheet" href="${ctx}/css/index.css"/>
    <style>

        .big {
            width:400px;
            height:400px;
            position:absolute;
            top:0;
            left:455px;
            border:1px solid #ccc;
            overflow:hidden;
            display:none;
            z-index: 1001;
        }
        .mask {
            width:175px;
            height:175px;
            background:rgba(255,255,0,0.4);
            position:absolute;
            top:0;
            left:0;
            cursor:move;
            display:none;
        }
        .small {
            position:relative;
        }
        .box img {
            vertical-align:top;
        }
        #bigBox img {
            position:absolute;
        }
    </style>
</head>
<body>
    <%@include file="/common/header-nav.jsp" %>
	<div class="container">
        <div class="row" style="height: 560px;">
            <div class="box col-md-3" id="box">
                <div class=" text-center small" id="smallBox" style="border: #428bca 3px solid;border-radius: 13px">
                    <img class="img-responsive img-rounded" src="${ctx}${product.masterPic.url}">
                    <div id="mask" class="mask"></div>
                </div>
            </div>
            <div id="bigBox" class="big">
                <img src="${ctx}${product.masterPic.url}" alt="" id="bigPic" width="600px">
            </div>
            <div class="col-md-9">
                <div class="form-group">
                    <label>商品名称：</label>${product.title}
                </div>
                <div class="form-group">
                    <label>商品编码：</label>${product.code}
                </div>
                <div class="form-group">
                    <label>商品型号：</label>${product.model}
                </div>
                <div class="form-group">
                    <label>商品价格：</label>${product.point}
                </div>
                <div class="form-group">
                    <label>商品简介：</label>${product.note}
                </div>
                <p>
                    <a class="btn btn-primary btn-lg  btn-block addCart" productid="${product.id}" role="button">加入购物车</a>
                </p>
            </div>
        </div>
        </div>


    </div> <!-- /container -->

    <%@include file="/common/footer.jsp" %>
	<%@ include file="/common/include-base-js.jsp"%>
    <script src="${ctx }/js/product.js" type="text/javascript"></script>
    <script>
        var smallBox = document.getElementById('smallBox');
        var mask = document.getElementById('mask');
        var bigBox = document.getElementById('bigBox');
        var box = document.getElementById('box')
        var bigPic = document.getElementById('bigPic')
        //鼠标经过小盒子，显示大盒子
        smallBox.onmouseover = function() {
            bigBox.style.display = "block";
            mask.style.display = "block";

        }

        smallBox.onmouseout = function() {
            bigBox.style.display = "none";
            mask.style.display = "none";
        }
        smallBox.onmousemove = function(event) {
//遮罩跟随鼠标
            var event = event || widow.event;
            var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
            var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
//计算mask的位置
// var boxX = ;
// var boxY = ;
            var targetX = pageX - box.offsetLeft - mask.offsetWidth / 5;
            var targetY = pageY - box.offsetLeft - mask.offsetHeight / 5;
//限制mask移动范围
            if (targetX < 0) {
                targetX = 0;
            }
// if(targetX > 175){
// targetX = 175;
// }
            if (targetY < 0) {
                targetY = 0;
            }
// if(targetY > 175){
// targetY = 175;
// }

            if (targetX > smallBox.offsetWidth - mask.offsetWidth) {
                targetX = smallBox.offsetWidth - mask.offsetWidth;
            }

            if (targetY > smallBox.offsetHeight - mask.offsetHeight) {
                targetY = smallBox.offsetHeight - mask.offsetHeight;
            }
//console.log(smallBox.offsetWidth-mask.offsetWidth);
// console.log(mask.offsetWidth);
//console.log(targetX);
            mask.style.left = targetX + "px";
            mask.style.top = targetY + "px";
//按照比例移动大图
            var bigToMove = bigPic.offsetWidth - bigBox.offsetWidth;
            var maskToMove = smallBox.offsetWidth - mask.offsetWidth;
            var rate = bigToMove / maskToMove;
            bigPic.style.left = -rate * targetX + "px";
            bigPic.style.top = -rate * targetY + "px";
        }


    </script>
</body>
</html>